<template>
	<view>
		<u-modal v-model="updateShow" @cancel="cancel" @confirm="confirm" show-cancel-button confirm-text="确定" cancel-text="取消"
		 :content="content"></u-modal>
		<u-toast ref="updateToast" />
		<u-toast ref="validateToast" />
		<u-form :model="user" ref="uForm" label-align="left" label-width="230">
			<u-form-item label="角色" prop="roleId" @click="showActionSheet">
				<u-input v-model="roleName" type="select" @click="roleListShow=true" />
				<u-select v-model="roleListShow" mode="single-column" :list="roleOptions" @confirm="select_role"></u-select>
			</u-form-item>
			<u-form-item label="昵称" prop="userName">
				<u-input class="margin: 24rpx" v-model="user.userName" />
			</u-form-item>
			<u-form-item label="真实姓名" prop="realName">
				<u-input v-model="user.realName" />
			</u-form-item>
			<u-form-item label="性别">
				<u-input v-model="user.gender" type="select" @click="genderShow=true" />
				<u-select v-model="genderShow" mode="single-column" :list="genderList" @confirm="select_gender"></u-select>
			</u-form-item>
			<u-form-item label="手机号" prop="phone">
				<u-input v-model="user.phone" />
			</u-form-item>
			<u-form-item label="学校名称" prop="campus">
				<u-input v-model="user.campus" />
			</u-form-item>
			<u-form-item label="邮箱" prop="email">
				<u-input v-model="user.email" />
			</u-form-item>
			<u-form-item label="分校">
				<u-input v-model="user.branchName" type="select" @click="studyshow = true" />
				<u-select v-model="studyshow" mode="single-column" :list="learnCampus" @confirm="select_campus"></u-select>
			</u-form-item>
			<u-form-item label="计划学车时间">
				<u-input v-model="user.learnPlan" type="select" @click="learnShow=true" />
				<u-select v-model="learnShow" mode="single-column" :list="learnPlanList" @confirm="select_learn"></u-select>
			</u-form-item>
			<u-form-item label="年级">
				<u-input v-model="user.grade" type="select" @click="gradeShow=true" />
				<u-select v-model="gradeShow" mode="single-column" :list="gradeList" @confirm="select_grade"></u-select>
			</u-form-item>
			<u-form-item label="学院" prop="college">
				<u-input v-model="user.college" />
			</u-form-item>
		</u-form>
		<view class="parent">
			<u-button class="child" type="primary" size="medium" @click="updateShow = true">保存</u-button>
		</view>
	</view>
</template>

<script>
	import api from "../../utils/api.js"

	export default {
		data() {
			return {
				roleName:"",
				actionSheetShow: false, 
				content: '请确认修改',
				updateShow: false,
				emailFlag: '',
				studyCampus: '',
				learnCampus: [],
				user: {
					userName: '',
					realName: '',
					gender: '',
					phone: '',
					campus: '',
					branchName: '',
					learnPlan: '',
					grade: '',
					college: '',
					branchId: '',
					email: '',
					roleId: ''
				},
				roleListShow:false,
				genderShow: false,
				learnShow: false,
				gradeShow: false,
				studyshow: false,
				genderList: [{
					value: '1',
					label: '男'
				}, {
					value: '2',
					label: '女'
				}],
				learnPlanList: [{
					value: '1',
					label: '大一上'
				}, {
					value: '2',
					label: '大一下'
				}, {
					value: '3',
					label: '大二上'
				}, {
					value: '4',
					label: '大二下'
				}, {
					value: '5',
					label: '大三上'
				}, {
					value: '6',
					label: '大三下'
				}, {
					value: '7',
					label: '大四上'
				}, {
					value: '8',
					label: '大四下'
				}],
				actionSheetList:[],
				roleOptions: [],
				gradeList: [],
				rules: {
					userName: [{
						required: true,
						message: '请输入用户名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					realName: [{
						min: 2,
						message: '姓名最少为两个字',
						trigger: 'change, blur'
					}],
					phone: [{
							type: 'number',
							len: 11,
							message: '请输入正确的手机号',
							trigger: 'change, blur'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					campus: [{
						min: 2,
						message: '学校名称不能为空',
						trigger: 'change, blur'
					}, ],
					college: [{
						min: 2,
						message: '学院不能为空',
						trigger: 'change, blur'
					}],
					email: [{
						type: 'email',
						message: '请输入正确的邮箱',
						trigger: 'change,blur'
					}]

				}
			}
		},
		created() {
			this.initGradeLIst()
			api.getBranchList().then(res => {
				for (var i = 0; i < res.data.length; i++) {
					var t = {
						value: res.data[i].id,
						label: res.data[i].branchName
					}
					this.learnCampus.push(t)
				}
			})
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad: function(option) {
			api.getUserInfo(option.token).then(res => {
				this.user = res.data.info
				this.user.branchName = res.data.branchName
			});
			api.getRoleList().then((res) => {
				setTimeout(() => {
				let curUserRoleId = this.user.roleId
				for (var i = 0; i < res.data.length; i++) {
					var role = res.data[i];
					if(curUserRoleId === role.id) {
						this.roleName = role.name
					}
					this.roleOptions.push({
						label: role.name,
						value: role.id,
					});
				}},0)	
			})
			
		},
		methods: {
			confirm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var that = this
						api.updateInfo(this.user).then(res => {
							this.showUpdateToast();
						}).catch(resp => {
							uni.showToast({
								title: "修改失败，请稍后再试!",
								icon: "none"
							});
						});
					} else {
						this.showValidateToast();
					}
				});
			},
			cancel() {

			},
			showActionSheet: function(index) {
				console.log(this.actionSheetList)
				this.actionSheetShow = true;
				this.selectUserId = this.userList[index].id;
				this.selectUserRealName = this.userList[index].realName;
			},
			initGradeLIst() {
				var year = 2017;
				for (let i = 1; i <= 24; i++) {
					let grade = {
						value: i,
						label: year++
					};
					this.gradeList.push(grade);
				}

			},
			showUpdateToast() {
				this.$refs.updateToast.show({
					title: '修改成功',
					type: 'success',
					position: 'top',
					isTab: true,
					duration: 3000
				})
			},
			showValidateToast() {
				this.$refs.validateToast.show({
					title: '请完善个人信息',
					type: 'error',
					position: 'top',
					duration: 1000
				})
			},
			select_gender(e) {
				this.user.gender = e[0].label
			},
			select_role(e) {
				this.roleName = e[0].label
				this.user.roleId = e[0].value
				api.updateUserRole(this.user.id, e[0].value).then((res) => {
					if(res.code === 0) {
						this.showUpdateToast();
					}
				})
			},
			select_learn(e) {
				this.user.learnPlan = e[0].label
			},
			select_grade(e) {
				this.user.grade = e[0].label
			},
			select_campus: function(e) {
				this.user.branchId = e[0].value
				this.user.branchName = e[0].label
			},
		}
	}
</script>

<style lang="scss">
	.cu-form-group {
		background-color: #ffffff;
		padding: 1upx 50upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}

	.parent {
		margin-top: 80rpx;
		position: relative;
	}

	.parent .child {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.content {
		padding: 24rpx;
		text-align: center;
	}
</style>
